<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <!-- 需要使用属性绑定的语法，把要从vm身上传递过来的数据，绑定到组件身上 -->
        <!-- 绑定的代码，写在HTML中 -->
        <logincom v-bind:vmmsg="msg"></logincom>
    </div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'这是vm的消息'
            },

           components:{
               logincom:{
                   //组件是不能直接访问vm身上的数据的，如果想访问，就必须让vm传递过来
                   template:'<div @click="sayHello">这是私有组件...{{this.vmmsg}}</div>',
                   data:function(){ //组件身上的data成员，必须是一个function对象
                    return{
                        name:'老李',
                        age:28
                    };
                   },
                   methods:{
                       sayHello:function(){
                           console.log('你好');
                           console.log(this);
                       }
                   },
                //    往组件身上注册一下，要传递过来的值，它的引用名
                // 这种方式，仅限于把vm身上的data里的数据传递过来，不能传递methods方法

                   props:['vmmsg']
                //    props与data中数据的区别：
                // 1. props是从vm实例身上传递过来的数据，data是组件自己的数据
                // 2.props是只读的，而data中的数据时可读可写的，虽然强行在代码中修改props传递过来值也能成功，但是vue会报错

               }
           }
        })
    </script>
</body>
</html>